<!--
 * @Description: 订单
 * @Author: lucl
 * @Date: 2021-06-29 09:36:32
 * @LastEditors: lucl
 * @LastEditTime: 2021-06-30 20:19:30
-->
<template>
  <div>
    <!-- 顶部 -->
    <div class="to">
      订单
    </div>
    <!-- 内容 -->
    <van-tabs v-model="active">
      <van-tab  title="全部" name="全部">
        <div @click="todetail(item.id)" class="ka" v-for="item in order_message" :key="item.id">
        <!-- 卡片数据 -->
        <div class="juzhong">
          <!-- 卡片头像 -->
          <div class="tou">
            <!-- 头像 -->
            <img width="100%" style="border-radius: 50%;" height="100%" :src="item.customer.userFace" alt="" />
          </div>
          <!-- 中间数据 -->
          <div class="you">
            <!-- 左上角数据   用户名 -->
            <div class="name">
              {{item.customer.username}}
            </div>
            <!-- 地址数据 -->
            <span class="zhong">{{item.address.province+item.address.city+item.address.area+item.address.address}}</span>
            <!-- 时间数据 -->
            <div class="shijian">
              {{item.orderTime | time}}
            </div>
            <!-- 状态数据 -->
            <div class="zhuangtai">
              {{item.status}}
            </div>
            <!-- 单价信息 -->
            <div class="danjia">
              {{item.total}}￥
            </div>
          </div>
        </div>
      </div>
      </van-tab>
      <van-tab  title="待接单" name="待接单" >
        <div @click="todetail(item.id)" class="ka" v-for="item in order_message" :key="item.id">
        <!-- 卡片数据 -->
        <div class="juzhong">
          <!-- 卡片头像 -->
          <div class="tou">
            <!-- 头像 -->
            <img width="100%" style="border-radius: 50%;" height="100%" :src="item.customer.userFace" alt="" />
          </div>
          <!-- 中间数据 -->
          <div class="you">
            <!-- 左上角数据   用户名 -->
            <div class="name">
              {{item.customer.username}}
            </div>
            <!-- 地址数据 -->
            <span class="zhong">{{item.address.province+item.address.city+item.address.area+item.address.address}}</span>
            <!-- 时间数据 -->
            <div class="shijian">
              {{item.orderTime | time}}
            </div>
            <!-- 状态数据 -->
            <div class="zhuangtai">
              {{item.status}}
            </div>
            <!-- 单价信息 -->
            <div class="danjia">
              {{item.total}}￥
            </div>
          </div>
        </div>
      </div>
      </van-tab>
      <van-tab  title="待服务" name="待服务">
        <div @click="todetail(item.id)" class="ka" v-for="item in order_message" :key="item.id">
        <!-- 卡片数据 -->
        <div class="juzhong">
          <!-- 卡片头像 -->
          <div class="tou">
            <!-- 头像 -->
            <img width="100%" style="border-radius: 50%;" height="100%" :src="item.customer.userFace" alt="" />
          </div>
          <!-- 中间数据 -->
          <div class="you">
            <!-- 左上角数据   用户名 -->
            <div class="name">
              {{item.customer.username}}
            </div>
            <!-- 地址数据 -->
            <span class="zhong">{{item.address.province+item.address.city+item.address.area+item.address.address}}</span>
            <!-- 时间数据 -->
            <div class="shijian">
              {{item.orderTime | time}}
            </div>
            <!-- 状态数据 -->
            <div class="zhuangtai">
              {{item.status}}
            </div>
            <!-- 单价信息 -->
            <div class="danjia">
              {{item.total}}￥
            </div>
          </div>
        </div>
      </div>
      </van-tab>
      <van-tab  title="已完成" name="已完成">
        <div @click="todetail(item.id)" class="ka" v-for="item in order_message" :key="item.id">
        <!-- 卡片数据 -->
        <div class="juzhong">
          <!-- 卡片头像 -->
          <div class="tou">
            <!-- 头像 -->
            <img width="100%" style="border-radius: 50%;" height="100%" :src="item.customer.userFace" alt="" />
          </div>
          <!-- 中间数据 -->
          <div class="you">
            <!-- 左上角数据   用户名 -->
            <div class="name">
              {{item.customer.username}}
            </div>
            <!-- 地址数据 -->
            <span class="zhong">{{item.address.province+item.address.city+item.address.area+item.address.address}}</span>
            <!-- 时间数据 -->
            <div class="shijian">
              {{item.orderTime | time}}
            </div>
            <!-- 状态数据 -->
            <div class="zhuangtai">
              {{item.status}}
            </div>
            <!-- 单价信息 -->
            <div class="danjia">
              {{item.total}}￥
            </div>
          </div>
        </div>
      </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth"
import { info } from "@/api/user"
import {pageQuery } from "@/api/order"
import Moment from 'moment'
export default {
  
  watch:{
    active(){
      this.order()
    }
  },
  data() {
    return {
      active:'全部',
      order_message:'',
    };
  },
  computed: {},
  filters:{
    time(value){
      return Moment(value).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  methods: {
    Moment,
    todetail(res){
      this.$router.push({
        path:'/order_detail',
        query:{
          id:res
        }
      })
    },
      async order(){
      // 获取token值
      let a ={
        token:getToken()
      }
      // 发送token获取个人id
      let res = await info(a)
      // 发送个人id查找订单信息
      let pramas={
        employeeId:res.data.id,
        page:1,
        pageSize:10000,
        status:this.active
      }
      if(pramas.status=='全部'){
        for (const status in pramas) {
          // key是属性名  temp[key]属性值
          // console.log(key,temp[key]);
          if (pramas[status]=='全部') {
            delete pramas[status]
          }
        }
      }
      // console.log(pramas)
      let response = await pageQuery (pramas)
      this.order_message=response.data.list;
      // console.log(response)

      // console.log(token)
    },
    
  },
  created() {
    this.order();
  },
  mounted() {}
};
</script>
<style scoped>
.to{
  height: 60px;
   background-image: linear-gradient(
      to right,
         hsl(300.39, 100%, 40.99%) 52.9%,
      hsl(294.76, 100%, 42.92%) 58.8%,
      hsl(289.93, 100%, 44.89%) 64.7%,
      hsl(285.89, 100%, 46.6%) 71%,
      hsl(282.63, 100%, 48.02%) 77.5%,
      hsl(280.2, 100%, 49.08%) 84.5%,
      hsl(278.66, 100%, 49.76%) 91.9%,
      hsl(278.12, 100%, 50%) 100%
      
    );
  text-align: center;
  line-height: 60px;
  /* display: flex; */
  /* text-align-last: center; */
}
.ka {
  display: flex;
  height: 100px;
  width: 90%;
  margin: 20px;
  box-shadow: 0 0 6px 0 #ccc;
  /* margin-right: 10px; */
  border-radius: 8px;
  /* background-color: turquoise; */
}
.juzhong{
  /* position:absolute; */
  display:flex;
  width: 100%;
  /* height: 80px; */
  margin:13px 13px;
  /* background-color:red; */
}
.tou {
  height: 100%;
  width: 74px;
  /* border-color:#000; */
  border-radius: 50%;
  background-color: darkblue;
  /* z-index: 2; */
}
.you{
  /* position: relative; */
  position: relative;
  flex: 2;
  margin-left: 20px;
  /* background-color: darkgoldenrod; */
}

.zhong{
  position:absolute;
  top: 30px;
  /* margin:20% 0; */
  font-size: 12px;
  /* background-color: tomato; */
}
.shijian{
  /* margin-left: 0; */
  position:absolute;
  bottom: 0;
  font-size: 12px;
  /* margin-bottom: 0%; */
  /* background-color: violet; */
}
.zhuangtai{
  position: absolute;
  font-size: 11px;
  color: #f8825d;
  right: 0%;
  top: 0;
}
.danjia{
  position: absolute;
  color:#FFCC00;
  right: 0%;
  bottom: 0;
}
</style>